<template>
  <div class="wordLists">
    <el-table :data="wordsList" stripe class="table">
      <el-table-column prop="comkey" label="竞争性关键词"> </el-table-column>
      <el-table-column prop="competitivenesss" label="竞争度" > </el-table-column>
      <el-table-column fixed="right" label="操作">
        <template v-slot="scope">
          <el-tooltip class="feedback" content="点击评价，获取更多信息" placement="top">
            <el-button @click="showDrawer" type="primary">评价</el-button>
          </el-tooltip>
        </template>
      </el-table-column>

      <a-drawer
        title="关键词反馈"
        :width="720"
        :open="open"
        :body-style="{ paddingBottom: '80px' }"
        :footer-style="{ textAlign: 'right' }"
        @close="onClose"
      >
        <div v-show="visiable">
          <a-row :gutter="16">
            <span>
              <h3>请您为关键词打分:</h3>
              <a-rate v-model:value="value" :tooltips="desc" />
              <span class="ant-rate-text">{{ desc[value - 1] }}</span>
            </span>
          </a-row>
          <el-divider></el-divider>
          <a-row :gutter="16">
            <a-col :span="24">
              <a-form-item label="相关意见" name="description">
                <a-textarea
                  v-model:value="comments"
                  :rows="4"
                  placeholder="例如：对我没有什么帮助"
                />
              </a-form-item>
            </a-col>
          </a-row>
          <a-row>
            <a-button type="primary" @click="subFeedback">Submit</a-button>
          </a-row>
        </div>

        <div v-show="!visiable && !other">
          <a-result
            status="success"
            title="评价成功"
            sub-title="感谢您为我们的服务做出评价，点击查看更多获取更多相关信息"
          >
            <template #extra>
              <a-button key="console" type="primary" @click="moreComment">查看更多评价</a-button>
            </template>
          </a-result>
        </div>

        <div v-show="!visiable && other">
          <h1>更多评论</h1>
          <el-timeline v-for="(item,index) in more" :key="index">
            <el-timeline-item :timestamp="item.time"></el-timeline-item>
            <el-card>
              <h4>{{ item.username}}</h4>
              <p> 评论于： {{item.time}}</p>
              <p> 评论结果： {{item.content}}</p>
              <p> 打分： {{item.score}}</p>
            </el-card>
          </el-timeline>
        </div>
        <template #extra>
          <a-space>
            <a-button @click="onClose" type="primary">Cancel</a-button>
          </a-space>
        </template>
      </a-drawer>
    </el-table>
  </div>
</template>
<script lang="ts" setup>
  import { ref } from 'vue';
  import axios from 'axios';
  import { defineProps } from 'vue';

  const props = defineProps({
    // 类别
    list: String,
  });

  const comments = ref();
  const more = ref();
  const visiable = ref(true);
  const other = ref(false);
  let wordsList = ref();
  // console.log("传输的数据"+ props.list);
  wordsList = JSON.parse(props.list);
  console.log(wordsList);
  const onClose = () => {
    open.value = false;
  };

  const value = ref<number>(3);
  const desc = ref<string[]>(['不相关', '不太了解', '一般相关', '较为相关', '很相关']);
  const open = ref<boolean>(false);

  const showDrawer = () => {
    open.value = true;
  };
  const subFeedback = () => {
    let params = {};
    params['user_id'] = '000';
    params['content'] = comments.value;
    params['seed_word_id'] = 'seedid';
    params['comp_word_id'] = 'compid';
    params['score'] = value;
    console.log(params);
    axios({
      method: 'post',
      url: '',
      params: params,
    })
      .then((res) => {
        console.log('请求成功');
        visiable.value = false;
      })
      .catch((error) => {
        console.log('请求失败');
        console.log('error');
        visiable.value = false;
      });
  };

  const moreComment = () => {
    axios({
      method: 'get',
      url: 'http://127.0.0.1:4523/m1/3571383-0-default/api/feedbacks',
    })
      .then((res) => {
        console.log('请求成功');
        console.log(res);
        more.value = JSON.stringify(res.data["feedbacks"]);
        more.value = JSON.parse(more.value);
        console.log(more.value["id"]);
        visiable.value = false;
        other.value = true;
      })
      .catch((error) => {
        console.log('请求失败');
        console.log('error');
        visiable.value = false;
      });
  }
</script>

<style>
  .feedback {
    margin-left: 10px;
  }
  .table{
    text-align: center;
  }
</style>
